<template>
  <div class="todo-footer">
    <label>
      <!-- 进行数据双向绑定 -->
      <input type="checkbox" v-model="comcheckAll" v-model:="value" />
    </label>
    <!-- 判断是否完成 使用数组方法累加器 reduces -->
    <span>
      <span>已完成{{ accomplish }}</span> / 全部{{ todoList.length }}
    </span>
    <button class="btn btn-danger" @click="clearcompletedtasks">
      清除已完成任务
    </button>
  </div>
</template>

<script>
export default {
  name: "Footer",
  props: ["checkAll", "todoList", "clearcompletedtasks"],
  data() {
    return {
      value: "1",
    };
  },
  computed: {
    // 计算属性 已完成的数量
    accomplish() {
      /* 使用数组方法reduce累加器 当每一项的done全等于true 则累加并返回出去 完成已完成 */
      return this.todoList.reduce((p, item) => {
        return item.done === true ? p + 1 : p;
      }, 0);
    },
    comcheckAll: {
      // 计算属性可读可写 利用数据双向绑定
      /* 
        当我在读取的时候 对数组进行遍历取得一个返回值交给计算属性并双向绑定
        因为数据双向绑定的原因 当input发生变化的时候等同于在计算属性set新的值
        所以拿到设置的值 并调用app传递来的函数传参 修改所有的input的选中
      */
      get() {
        //遍历数组 数组中所有回调都满足则返回ture 有一个不满足则返回false 且还需满足数组长度不等等于0
        return (
          this.todoList.every((item) => item.done) && this.todoList.length !== 0
        );
      },
      set(value) {
        //拿到最新设置的值调用checkAll传递给APP
        this.checkAll(value);
      },
    },
  },
};
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>
